<template>
	<view class="cash">
		<view class="tops">
			<view class="tixian" @click="detail">
				提现记录
			</view>
			<image class="bg" src="https://oss.6mate.cn/mini/cashbg1.png" mode=""></image>
			<view v-if="info" class="caculate">
				<view class="tit">
					账户余额
				</view>
				<view class="total">
					<text>￥</text>

					<u-count-to font-size="48" :decimals="2" bold color="#fff" :end-val="info.balance" separator=",">
					</u-count-to>
				</view>
				<view class="list">
					<view class="item">
						<view class="top">
							<text>￥</text>
							<u-count-to font-size="32" :decimals="2" color="#fff" :end-val="info.freezeAmount"
								separator=",">
							</u-count-to>
						</view>
						<view class="bot">
							冻结金额
						</view>
					</view>
					<view class="item">
						<view class="top">
							<text>￥</text>
							<u-count-to font-size="32" :decimals="2" color="#fff" :end-val="info.canCashAmount"
								separator=",">
							</u-count-to>

						</view>
						<view class="bot">
							可提现金额
						</view>
					</view>
					<view class="item">
						<view class="top">
							<text>￥</text>
							<u-count-to font-size="32" :decimals="2" color="#fff" :end-val="info.hasCashedAmount"
								separator=",">
							</u-count-to>

						</view>
						<view class="bot">
							已提现金额
						</view>
					</view>

				</view>
			</view>
		</view>
		<view class="styleClass">
			<view class="title">
				提现方式
			</view>
			<view class="list">
				<view @click="tab(index)" :class="[cur==index?'active':'']" v-for="(item,index) in list" class="item">
					<image :src="item.iconUrl" mode=""></image>
					<view class="name">
						{{item.cashAccountTypeName}}
					</view>
					<image class="deco4" src="https://oss.6mate.cn/mini/deco4.png" mode=""></image>
				</view>
			</view>
			<!-- 受否已绑定：0否，1是 -->
			<!-- {{list[cur].binding}} -->
			<view v-if="list[cur].binding==0" class="curType not">
				<!-- 支付宝账号 -->
				<view class="cardStatus">
					尚未绑定
				</view>
				<view @click="bind(list[cur])" class="bindBtn">
					立即绑定 <u-icon name="arrow-right" color="#FA4A53" size="28"></u-icon>
				</view>
				<!-- <text>18751810294（张*伟）</text> -->
			</view>
			<view v-else class="curType">
				<!-- {{list[cur].cashAccountTypeName}} -->
				<text v-if="list[cur].cashAccountType=='BANK_CARD'">
					<text class="text1">{{list[cur].cashAccountTypeName}}</text>
					{{list[cur].bankName}} {{list[cur].accountNo}} （{{list[cur].realName}}）</text>
				<text v-else><text class="text1">{{list[cur].cashAccountTypeName}}</text>
					{{list[cur].accountNo}}（{{list[cur].realName}} ）</text>
			</view>
		</view>
		<view class="getMoney">
			<view class="title">
				提现金额
			</view>
			<view class="search">
				<text>¥</text>
				<view class="inp">
					<input maxlength="6" @blur="writeMoney" v-model="money" type="number" placeholder="最低提现金额为100元"
						placeholder-class="my-placeholder" />
					<!-- <input v-model="money" placeholder="最低提现金额为100元" type="number" /> -->
				</view>

			</view>
			<view class="sxf">
				<view class="left">
					手续费
				</view>
				<view class="right">
					{{sxf}}
				</view>
			</view>
			<view v-if="realAmount" class="sxf">
				<view class="left">
					到账金额
				</view>
				<view class="right">
					¥{{realAmount}}
				</view>
			</view>
			<view v-if="rules" class="tips">
				<image src="https://oss.6mate.cn/mini/verified.png" mode=""></image>
				<view class="infos">
					<view class="">
						提现规则：
					</view>

					<u-parse :html="rules.description"></u-parse>
					<!-- {{rules.description}} -->
					<!-- 必须使用你自己的实名认证账户提现。每月15日到17日为集中提现日，提现审核需要等待1到3个工作日。提现需收取6%的手续费给到金融机构。如有问题请联系客服。 -->
				</view>
			</view>
		</view>
		<view class="btns">
			<u-button :disabled="rules.canCash==0?true:false" shape="circle" type="error" @click="submit" :ripple="true"
				ripple-bg-color="#d7d8da">提现
			</u-button>
		</view>
		<view v-if="rules.canCash==0" class="tips">
			{{rules.canNotCashReason}}
		</view>

		<u-popup close-icon-color="#0F1417" close-icon-size="30" v-model="transferToAppMask" :closeable="true"
			:border-radius="30" mode="center">
			<view class="toAppBox">
				<sure :type="list[cur].id" :phone="phone" :money="money" @refreshlist="refreshlist" />
			</view>
		</u-popup>
	</view>
</template>

<script>
	import sure from './sure.vue'
	export default {
		components: {
			sure
		},
		data() {
			return {
				phone: '',
				realAmount: '',
				sxf: '',
				defaultAmount: "",
				rules: null,
				info: null,
				transferToAppMask: false,
				money: '',
				cur: 0,
				list: [
					// 	{
					// 	name: "支付宝提现",
					// 	icon: 'https://oss.6mate.cn/mini/zhifubao.png'
					// }, {
					// 	name: "银行卡提现",
					// 	icon: 'https://oss.6mate.cn/mini/Bank-card-two.png'
					// },
				]
			}
		},
		onShow() {
			this.FnbalanceGet()
			this.getcashAccountList()
			this.FnruleGet() //佣金提现规则查询
		},
		methods: {

			bind(cur) {
				if (cur.cashAccountType == 'ALIPAY') {
					// 支付宝绑定
					uni.navigateTo({
						url: '/subPack/mine/bindAlipay'
					});
				} else {
					// 银行卡绑定
					uni.navigateTo({
						url: '/subPack/mine/bindCard'
					});
				}
			},
			refreshlist(val) {

				this.transferToAppMask = false

				if (val) {
					uni.redirectTo({
						url: '/subPack/commission/record'
						// url: "/subPack/commission/components/sub"
					})
				}

			},
			FnruleGet() {

				this.$u.api
					.ruleGet()
					.then((res) => {
						console.log(res, 666666);
						this.rules = res?.data;
						this.sxf = res?.data?.chargeRateOrAmount;
						this.defaultAmount = res?.data?.chargeRateOrAmount;

					});
			},
			writeMoney(e) {
				let num = e.detail.value

				if (!num) {
					this.sxf = this.defaultAmount;
					this.realAmount = ''

					this.$u.toast(`提现金额不能为空！`);
					return
				}

				if (parseFloat(num) > this.rules.maxCashAmount) {
					this.sxf = this.defaultAmount;
					this.realAmount = ''

					this.$u.toast(`单次最高提现金额不能大于${this.rules.maxCashAmount}！`);
					return
				}
				if (parseFloat(num) < this.rules.minCashAmount) {
					this.sxf = this.defaultAmount;
					this.realAmount = ''
					this.$u.toast(`单次最低提现金额不能小于${this.rules.minCashAmount}！`);
					return
				}
				if (this.rules.useInteger) {
					this.sxf = this.defaultAmount;
					this.realAmount = ''
					if (parseFloat(num) % this.rules.integerAmount) {
						this.$u.toast(`输入金额需是${this.rules.integerAmount}的整数倍！`);
						return
					}
				}

				this.FncashCal(this.money)
			},
			FncashCal(cashAmount) {
				this.$u.api
					.cashCal({
						cashAmount
					})
					.then((res) => {
						console.log(res, 7777777);


						if (res.code == 'ok') {
							this.sxf = res?.data?.chargeRateOrAmount;
							this.realAmount = res?.data?.realAmount;
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
						// this.info = res?.data
					});
			},
			FnbalanceGet() {
				this.$u.api
					.balanceGet()
					.then((res) => {
						this.info = res?.data
					});
			},
			getcashAccountList() {
				this.$u.api
					.cashAccountList()
					.then((res) => {
						console.log(res, 666666);
						this.list = res.data

					});
			},
			submit() {


				console.log(this.list[this.cur], 77777777777777);
				if (this.list[this.cur]?.binding == 0) {
					this.$u.toast(`请先绑定${this.list[this.cur]?.cashAccountTypeName}账号！`);
					return
				}


				if (!this.money) {
					this.$u.toast('请输入提现金额！');
					return
				}

				if (parseFloat(this.money) > this.rules.maxCashAmount) {
					this.$u.toast(`单次最高提现金额不能大于${this.rules.maxCashAmount}！`);
					return
				}
				if (parseFloat(this.money) < this.rules.minCashAmount) {
					this.$u.toast(`单次最低提现金额不能小于${this.rules.minCashAmount}！`);
					return
				}
				if (this.rules.useInteger) {
					if (parseFloat(this.money) % this.rules.integerAmount) {
						this.$u.toast(`输入金额需是${this.rules.integerAmount}的整数倍！`);
						return
					}
				}
				if (parseFloat(this.money) > parseFloat(this.info.balance)) {
					this.$u.toast(`可提现金额不足！`);
					return
				}
				
				
				this.$u.api
					.mobileGet()
					.then((res) => {
						this.transferToAppMask = true
						this.phone = res?.data?.desenMobile

					});


			},
			tab(index) {
				this.cur = index
			},
			detail() {
				console.log(333)
				uni.navigateTo({
					url: "/subPack/commission/record"
				})
			}
		}
	}
</script>

<style>
	page {
		background: #F6F6F6;
	}
</style>
<style scoped lang="scss">
	.cash {
		padding: 20rpx 40rpx;


		.toAppBox {
			margin: 0 auto;
			width: 670rpx;
			background: #FFFFFF;
		}

		.tops {
			position: relative;
			height: 270rpx;
			background: linear-gradient(to bottom left, #FA4A53 0%, #FA4A53 50%, #FF8F92 100%);
			// background: linear-gradient(to bottom left, #FA4A53, #FF8F92);
			box-shadow: 0rpx 42rpx 72rpx 0rpx rgba(78, 62, 62, 0.23);
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.bg {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
			}

			.tixian {
				z-index: 8;
				position: absolute;
				right: 32rpx;
				top: 28rpx;
				width: 144rpx;
				height: 56rpx;
				background: #FFFFFF;
				border-radius: 106rpx 106rpx 106rpx 106rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 500;
				font-size: 24rpx;
				color: #FA4A53;
				line-height: 40rpx;
			}

			.caculate {
				.tit {
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 33rpx;
					padding: 28rpx 0 36rpx 32rpx;
				}

				.total {
					padding-left: 32rpx;
					display: flex;
					align-items: flex-end;
					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
					font-weight: bold;
					font-size: 48rpx;
					color: #FFFFFF;
					line-height: 56rpx;

					text {
						font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
						font-weight: 400;
						font-size: 32rpx;
						color: #FFFFFF;
						line-height: 38rpx;
					}
				}

				.list {
					margin-top: 24rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.item {
						flex: 1;
						display: flex;
						flex-direction: column;
						align-items: center;
						font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 28rpx;

						.top {
							text {}
						}

						.bot {
							margin-top: 8rpx;
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 24rpx;
							color: #FFFFFF;
							line-height: 28rpx;
						}
					}
				}
			}
		}

		.styleClass {
			// height: 252rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin: 24rpx 0;
			padding: 24rpx 32rpx;

			.title {
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 500;
				font-size: 32rpx;
				color: #0F1417;
				line-height: 38rpx;
			}

			.list {
				margin: 24rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.item {
					width: 274rpx;
					height: 72rpx;
					background: #FFFFFF;
					border-radius: 14rpx 14rpx 14rpx 14rpx;
					border: 2rpx solid #E7E7E7;
					position: relative;

					&:nth-child(1) {
						margin-right: 58rpx;
					}

					display: flex;
					align-items: center;
					justify-content: center;
					font-family: Alibaba PuHuiTi,
					Alibaba PuHuiTi;
					font-weight: 500;
					font-size: 24rpx;
					color: #0F1417;
					line-height: 28rpx;

					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 16rpx;
					}

					.deco4 {
						width: 30rpx;
						height: 30rpx;
						position: absolute;
						bottom: 0;
						right: 0;
						margin-right: 0;
						display: none;
					}

					&.active {
						background: #FFEDEE !important;
						border: 2rpx solid #FA4A53 !important;

						.deco4 {
							display: block;
						}
					}
				}
			}

			.curType {
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 28rpx;

				color: rgba(15, 20, 23, 0.6);
				line-height: 40rpx;

				.text1 {

					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 28rpx;
					color: #0F1417;
					line-height: 40rpx;
					margin-right: 8rpx;
				}

				&.not {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.cardStatus {
						color: #a2a4a4;
					}

					.bindBtn {
						display: flex;
						align-items: center;
						justify-content: space-between;
						color: #FA4A53;
					}
				}

			}
		}

		.getMoney {
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin: 24rpx 0;
			padding: 24rpx 32rpx;

			.title {
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 500;
				font-size: 32rpx;
				color: #0F1417;
				line-height: 38rpx;
				margin-bottom: 24rpx;
			}

			.search {
				display: flex;
				align-items: center;
				padding-bottom: 8rpx;
				margin-bottom: 10rpx;
				border-bottom: 2rpx solid #F5F5F5;

				text {
					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
					font-weight: 400;
					font-size: 48rpx;
					color: #0F1417;
					// line-height: 56rpx;
				}

				.inp {
					margin-left: 8rpx;
					flex: 1;


					input {
						font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
						font-weight: 400;
						font-size: 48rpx;
						min-height: 50px !important;

						// color: rgba(15,20,23,/0.2);
						// line-height: 56rpx;
					}
				}
			}

			.sxf {
				padding-top: 8rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 28rpx;
					color: rgba(15, 20, 23, 0.4);
					line-height: 40rpx;
				}

				.right {
					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #0F1417;
					line-height: 40rpx;
				}
			}

			.tips {
				padding-top: 28rpx;
				display: flex;
				align-items: flex-start;

				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 12rpx;
				}

				.infos {
					margin-top: -5rpx;
					flex: 1;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 24rpx;
					color: rgba(15, 20, 23, 0.6);
					line-height: 36rpx;
					text-align: justify;
				}
			}
		}


	}

	/deep/ .my-placeholder {
		// color: pink; /* 将颜色改为粉色 */
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 48rpx;
		color: rgba(15, 20, 23, 0.2);
		// line-height: 56rpx;
	}

	.btns {
		margin: 30rpx 0 0;
		height: 80rpx;
		background: #FA4A53;
		box-shadow: 0rpx 20rpx 24rpx 0rpx rgba(181, 36, 44, 0.2);
		border-radius: 44rpx 44rpx 44rpx 44rpx;
	}
</style>
